<template>
  <div id="app">
  <mt-header fixed :title="selected" v-show="isShow" v-if="isTitle"></mt-header>
  <keep-alive include="page,classify"><router-view/></keep-alive>
  <audio :src="getmusic_info.musicMp3Url" controls class="audio" autoplay v-show="is_v" v-if="is_s"></audio>
  <mt-tabbar v-model="selected" fixed v-show="isShow">     
  <mt-tab-item id="首页" @click.native="jump('/page')" :class="{icon:selected=='首页'}">
    <img slot="icon" src="./assets/index.png" v-show="selected!='首页'">
    <img slot="icon" src="./assets/index(sel).png" v-show="selected=='首页'">
    首页
  </mt-tab-item>
  <mt-tab-item id="分类"  @click.native="jump('/classify')" :class="{icon:selected=='分类'}">
  
    <img slot="icon" src="./assets/classify.png" v-show="selected!='分类'">
    <img slot="icon" src="./assets/classify(sel).png" v-show="selected=='分类'">
    分类
  </mt-tab-item>
  <mt-tab-item id="购物车" @click.native="jump('/cart')" class="bd_fater" :class="{icon:selected=='购物车'}">
  <mt-badge type="error" class="bd" v-show="getCount!=0">{{getCount}}</mt-badge>
    <img slot="icon" src="./assets/cart.png" v-show="selected!='购物车'">
    <img slot="icon" src="./assets/cart(sel).png" v-show="selected=='购物车'">
    
    购物车
  </mt-tab-item>
  <mt-tab-item id="我的" @click.native="jump('/my_home')" :class="{icon:selected=='我的'}">
    <img slot="icon" src="./assets/per.png" v-show="selected!='我的'">
    <img slot="icon" src="./assets/per(sel).png" v-show="selected=='我的'">

    我的
  </mt-tab-item>
</mt-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      selected:"首页",
      isShow:true,
      isTitle:false,
      is_s:true,
      is_v:true,
    }
  },

  methods: {
    jump(p){
      sessionStorage.setItem("select",this.selected)
      this.$router.push(p).catch(e=>{});
    }
  },
  mounted() {
    if(sessionStorage.getItem("select")){
      this.selected=sessionStorage.getItem("select");
    }
  },
  computed: {
    getCount(){
      return this.$store.getters.allCount;
    },
    getmusic_info(){
      return this.$store.state.music_info;
    }
  },
  //监听路由的变化
  watch:{
    $route:{
    handler(path){
    if(path.path=="/detail" || path.path=="/register" || path.path=="/login" || path.path=="/test" || path.path=="/change_info"|| path.path=="/seek" || path.path=="/swipdetail"){
       this.isShow=false;
    }else{
       this.isShow=true;
    }
    if(path.path=="/my_home"){
      this.isTitle=false;
    }
    if(path.path=="/page"){
      this.selected="首页"
    }
    if( path.path=="/register" || path.path=="/login" || path.path=="/test"){
      this.is_s=false;
    }else{
      this.is_s=true;
    }
    if(path.path=="/detail" || path.path=="/swipdetail" || path.path=="/seek" || path.path=="/cart" || path.path=="/change_infox`"){
      this.is_v=false;
    }else{
      this.is_v=true;
    }
    },
    immediate:true
   /*  $route(path){
    if(path.path=="/detail"){
       this.isShow=false;
     }else{
       this.isShow=true;
     }
    }
  } */
}
},
}
</script>

<style>
.icon{
  color:red !important
}
.bd_fater{
  position: relative;
}
  .bd{
    position: absolute;
    top:5%;
    left: 60%;
  }
  *{
    margin: 0;
    padding: 0;
  }
  .audio{
    position: fixed;
    width: 100%;
    height: 40px;
    z-index: 99;
    bottom: 7%;
  }
</style>